<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Metadata Selection Form</title>
    <style>
      /* Basic styling for a clean and modern look */
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f7f8;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }
      .form-container {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        max-width: 400px;
        width: 100%;
      }
      h2 {
        text-align: center;
        color: #333333;
        margin-bottom: 20px;
      }
      label {
        font-size: 0.9em;
        color: #555555;
        margin-bottom: 5px;
        display: block;
      }
      select {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #dddddd;
        border-radius: 4px;
        font-size: 1em;
      }
      button {
        width: 100%;
        padding: 10px;
        background-color: #007bff;
        color: #ffffff;
        border: none;
        border-radius: 4px;
        font-size: 1em;
        cursor: pointer;
        transition: background-color 0.3s;
      }
      button:hover {
        background-color: #0056b3;
      }

    /* 输入框样式 */
    input[type="text"],
      input[type="password"] {
          width: 100%;
          padding: 10px;
          margin-bottom: 15px;
          border: 1px solid #ccc;
          border-radius: 5px;
      }

      /* 密码输入框相关的容器样式 */
      .relative-container {
          position: relative;
      }

      /* 眼睛图标样式 */      
      .eye-icon {
          position: absolute;
          top: 12px;
          right: 10px;
          cursor: pointer;
          color: #777;
      }
    </style>
  </head>
  <body>
    <div class="form-container">
      <h2>Tag Device Location</h2>

      <!-- 按下提交按钮后调用submitform -->
      <form id="metadataForm" onsubmit="submitForm(event)">

        <label for="device_id">device ID:</label>
        <input type="text" id="device_id" name="device_id">

        <label for="building">Building:</label>
        <select id="building" name="building">
          <option value="">Select Building</option>
        </select>

        <label for="floor">Floor:</label>
        <select id="floor" name="floor">
          <option value="">Select Floor</option>
        </select>

        <label for="room">Room:</label>
        <select id="room" name="room">
          <option value="">Select Room</option>
        </select>

        <label for="location">Location:</label>
        <select id="location" name="location">
          <option value="">Select Location</option>
        </select>

        <label for="type">Type:</label>
        <select id="type" name="type">
          <option value="">Select Type</option>
        </select>

        <!-- //提交按键 -->
        <button id="connectWifiButton" type="submit">Submit</button>

        

      </form>

      <form> 
        <!-- //重置位置信息按键 -->
        <button id="RestPositionIno" style="margin-top: 10px;">RestPositionIno</button>
      </form>

    </div>

    <script>
      // 获取ConnectWifi按钮元素
      const connectWifiButton = document.getElementById('connectWifiButton');

      // 为按钮添加点击事件处理函数
      connectWifiButton.addEventListener('click', function () {
      const deviceIdInput = document.getElementById('device_id');
      const deviceId = deviceIdInput.value;
      if (!/^\d{10}$/.test(deviceId)) {
        // 如果格式不正确，阻止跳转，显示提示信息
        alert('Device ID 必须为10位数字');
        event.preventDefault();
        return;
      }
        // 设置要跳转的目标URI
        const targetUri = '/configwifi';

        // 执行页面跳转
        window.location.href = targetUri;
      });

      // 获取重置位置按钮元素
      const RestPositionInoButton = document.getElementById('RestPositionIno');

      // 为按钮添加点击事件处理函数
      RestPositionInoButton.addEventListener('click', function () {
        // 设置要跳转的目标URI
        const targetUri = '/configwifi';

      
        // 发送重置后的位置数据到ESP32
        send_RestPositionIno_Data()

        // 执行页面跳转
        window.location.href = targetUri;
      });



      // Load JSON data for populating dropdowns
      fetch("/spiffs")
        .then((response) => response.json())
        .then((data) => populateDropdowns(data.tags))
        .catch((error) => console.error("Error fetching JSON data:", error));


      function populateDropdowns(tags) {
        const buildingSelect = document.getElementById("building");
        const floorSelect = document.getElementById("floor");
        const roomSelect = document.getElementById("room");
        const locationSelect = document.getElementById("location");
        const typeSelect = document.getElementById("type");

        // Populate each select element with corresponding options
        tags.forEach((tag) => {
          const option = document.createElement("option");
          option.value = JSON.stringify({ id: tag.id, name: tag.name });
          option.textContent = tag.name;

          switch (tag.description) {
            case "building":
              buildingSelect.appendChild(option);
              break;
            case "floor":
              floorSelect.appendChild(option);
              break;
            case "room":
              roomSelect.appendChild(option);
              break;
            case "location":
              locationSelect.appendChild(option);
              break;
            case "type":
              typeSelect.appendChild(option);
              break;
          }
        });
      }



      // 核查设备id是否合法输入
    //   function checkDeviceId() {
    //   const deviceIdInput = document.getElementById('device_id');
    //   const value = deviceIdInput.value;
    //   if (/^\d{8}$/.test(value)) {
    //     deviceIdInput.setCustomValidity('');
    //   } else {
    //     deviceIdInput.setCustomValidity('请输入8位数字');
    //   }
    // }



      function submitForm(event) {
        event.preventDefault(); // Prevent form from reloading the page

        const form = document.getElementById("metadataForm");
        const selectedValues = {
          device_id: JSON.parse(form.device_id.value || "{}"),
          building: JSON.parse(form.building.value || "{}"),
          floor: JSON.parse(form.floor.value || "{}"),
          room: JSON.parse(form.room.value || "{}"),
          location: JSON.parse(form.location.value || "{}"),
          type: JSON.parse(form.type.value || "{}"),
        };

        // Display the submitted values in the console
        console.log("Submitted Data:", selectedValues);

        // Send data as a single JSON response
        alert("Form submitted! Check the console for submitted data.");

        //DATA NEEDS TO SEND TO SERVER
        send_TrashCanIno_Data();
      }



    const ws_client = new WebSocket("ws://"+window.location.host+"/ws"); 
    
    function send_TrashCanIno_Data() {   //发送自定义位置数据
      var data = {  
      device_id: document.getElementById("device_id").value,
      building: document.getElementById("building").value,      
      floor: document.getElementById("floor").value,  
      room: document.getElementById("room").value,  
      location: document.getElementById("location").value,  
      type: document.getElementById("type").value  
      };  
      // 整体一起发送提高了发送的稳定性
      ws_client.send(JSON.stringify(data));
    }

      function send_RestPositionIno_Data() {   //发送自定义位置数据
      var data = {  
      building: '',      
      floor: '',  
      room: '',  
      location: '',  
      type: ''  
      };  
      // 整体一起发送提高了发送的稳定性
      ws_client.send(JSON.stringify(data));
    }



    </script>
  </body>
</html>



